<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css" />
	<style>
		.swiper-slide{
			overflow: inherit;
			width:auto;
		}
		.aui-bar-nav {
            background: linear-gradient(-127deg, rgba(248, 28, 107, 1), rgba(248, 28, 107, 1));
		}

		.local {
			height: 2.4rem;
			width: 28.5px;
			background: url('__IMG__/local.png') no-repeat center center;
			background-size: 13.5px 16px;
		}

		.school {
			height: 2.4rem;
			line-height: 2.5rem;
			font-size: 16px;
			color: #fff;
		}

		.arrow {
			height: 2.4rem;
			width: 10.5px;
			background: url('__IMG__/right_arrow.png') no-repeat center center;
			background-size: 5px 9.5px;
		}

		.shop {
			height: 2.4rem;
			width: 2.2rem;
			background: url('__IMG__/shop1.png') no-repeat left center;
			background-size: 20px 21px;
		}

		.search {
			height: 2.4rem;
			width: 2.25rem;
			background: url('__IMG__/search1.png') no-repeat left center;
			background-size: 18px 19px;
		}

		.message {
			height: 2.4rem;
			width: 1.675rem;
			background: url('__IMG__/message.png') no-repeat left center;
			background-size: 18.5px 18px;
		}

		.group {
			height: 2.15rem;
			width: 1rem;
			background: url('__IMG__/group.png') no-repeat left center;
			background-size: 0.825rem 0.825rem;
			margin-left: 0.5rem;
			margin-right: 0.5rem;
		}

		.navbar {
			/*width: 100%;*/
			background-color: #FFFFFF;

		}

		.tab-grid {
			width: 100%;
			height: 2.15rem;
			/*overflow-x: scroll;*/
			/*overflow-y: hidden;*/
			background-color: white;
			position: relative;
			/*padding-left: 0.5rem;*/
		}

		.tab-grid::-webkit-scrollbar {
			height: 0;
		}

		.tab-item {
			float: left;
			height: 2.15rem;
			/*padding-left: 0.375rem;*/
			/*padding-right: 1rem;*/
			line-height: 2.25rem;
			text-align: center;
			font-size: 0.75rem;
			color: #666;
			z-index: 10;
		}

		.tab-item-all {
			width: 10000%;
			padding-left: 0.15rem;
		}

		.item_active {
			color: #FF5757;
			font-size: 0.75rem;
		}

        .navbar {
            width: 100%;
            background-color: #FFFFFF;
        }

        .tab-grid {
            width: 100%;
            height: 2.15rem;
            overflow-x: scroll;
            overflow-y: hidden;
            background-color: white;
            position: relative;
            padding-left: 0.5rem;
        }

        .tab-grid::-webkit-scrollbar {
            height: 0;
        }

        .tab-item {
            float: left;
            height: 2.15rem;
            /*padding-left: 0.375rem;*/
            padding-right: 1rem;
            line-height: 2.25rem;
            text-align: center;
            font-size: 0.75rem;
            color: #666;
            z-index: 10;
        }

        .tab-item-all {
            width: 10000%;
            padding-left: 0.15rem;
        }

        .item_active {
            color: #FF5757;
            font-size: 0.75rem;
        }
	</style>
    <style>
        .huadong{
            position: absolute;
            top:0;
            left: 0;
            height:100%;
            z-index: 9999;
            width:80%;
            /*border:1px solid red;*/
            display: none;
            opacity: 1;
            overflow: scroll;
            background-color: gainsboro;
        }
        .ovfHiden{overflow: hidden;height: 100%;}
    </style>
</head>
<body>
	<header class="aui-bar aui-bar-nav baifezhibashi" style="display:flex;" id="header">
		<div class="local" onclick="address()"></div>
		<div class="school aui-ellipsis-1" onclick="address()">{$address}</div>
		<!--<div class="arrow"></div>-->
		<div class="flex-con"></div>
		<div class="shop hidden" id='one111' ></div>
		<div class="search hidden" id='one222'></div>
		<div class="message" onclick="message()"></div>
	</header>
    <div class="navbar flex-wrap baifezhibashi">
        <div class="group" onclick="opennnn()"></div>
        <section class="tab-grid">
            <div class="tab-item-all" id="list">
                <div name="0" class="gogogogogogog tab-item item_active">首页</div>
                {if $data}
                {volist name='data' id='d'}
                <div name="{$d.s_id}" class="gogogogogogog tab-item">{$d.s_pinlei}</div>
                {/volist}
                {/if}
            </div>
        </section>
    </div>
    <!--首页图片展示-->
    <div class="picture baifezhibashi">
        <img src="{$index ?? '__IMG__/zhanweitu/a1.png'}" />
    </div>
    <!--首页图片end-->
    <input type="hidden" id="need" value="{$need}" />
</body>
<div class="huadong">
    {if $data}
    {volist name='data' id='d'}
    <div class="picture" name="{$d.s_id}" onclick="shopInfo(this)">
        <img src="{$d.pl_image ?? '__IMG__/zhanweitu/a1.png'}" />
    </div>
    {/volist}
    {else /}
    <div class="seat">
        <img src="__IMG__/quexing/no_content.png" class="seatImg"/>
        <div class="seatName">没有符合条件的内容</div>
    </div>
    {/if}
</div>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.7;top: 0;left: 0;"></div>

{include file="public/footer" /}
<script type="text/javascript" src="__JS__/swiper.min.js"></script>
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3108d268226b46915b5faa028a004245&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var need = $('#need').val();
    if(need == 0){
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition:'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                extensions:'all'

            });
            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });
        });
        //解析定位结果
        function onComplete(data) {
            var address = data.addressComponent.township;
            var lat = data.position.lat;
            var lon = data.position.lng;
            $.ajax({
                url:'{:url("Index/indexGetData")}',
                data: 'lat='+lat+'&lon='+lon+'&address='+address,//
                type:'POST',
                dataType:'JSON',
                success: function(returndata){
                    location.reload();
                },
                error:function () {
                    alert('Ajax error!');
                }
            })
        }
        //解析定位错误信息
        function onError(data) {
            alert(data.message)
        }
    }else{
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 5,
            spaceBetween: 1,
            freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
            loop: false, //是否可循环
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
        });
        $('.gogogogogogog').click(function(){
//            $(this).addClass("item_active").siblings().removeClass("item_active");
            var s_id = $(this).attr('name');
            gowhere(s_id);
        });
	}

	function address(el) {
        location.href = '{:url("Index/address")}';
    }
    function message(el) {
        location.href = '{:url("Index/message")}';
    }
    function shopInfo(el) {
        var s_id = $(el).attr('name');
        gowhere(s_id);
    }
    function gowhere(s_id) {
        if(s_id == 0){
            location.href = '{:url("home/Index/index")}';
        }else{
            location.href = '{:url("Index/shopInfo")}?s_id='+s_id;
        }
    }

    //----------------------------------
    function opennnn() {
        $('.huadong').css('display','block');
        $('html,body').addClass('ovfHiden');
        $('.all_div').css('display','block');
//        $('.baifezhibashi').css('margin-left','80%');
//        $('#footer').css('margin-left','80%');
    }
    $('.all_div').click(function () {
        $('.huadong').css('display','none');
        $('html,body').removeClass('ovfHiden');
        $('.all_div').css('display','none');
//        $('.baifezhibashi').css('margin-left','80%');
//        $('#footer').css('margin-left','80%');
    });
    //----------------------------------

    pushHistory();
    window.addEventListener("popstate", function(e) {
        window.close();
        WeixinJSBridge.call('closeWindow');
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
    XBack.listen(function(){
        alert('back');
    });
</script>
</html>
